<template>
  <div>
    <div class="header">暂支申请</div>
    <el-form :model="cuForm" ref="cuForm" v-loading="formLoading" :rules="rules"
             :disabled="cuForm.flow_status ==3||cuForm.flow_status ==4"
    >
      <div style="margin: 0 auto 5px auto;width: 20%;text-align: center">
        <el-form-item prop="date">
          <span class="tip">*</span>日期：
          <el-date-picker
            v-model="cuForm.date"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <table class="mailTable">
        <tr class="firstTr">
          <td class="column firstTd">
            <span class="tip">*</span>暂支事由
          </td>
          <td class="column" colspan="3">
            <el-form-item prop="reason">
              <el-input
                type="textarea"
                placeholder="请输入事由"
                v-model="cuForm.reason"
                :rows="4"
              >
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column firstTd">
            <span class="tip">*</span>暂支金额
          </td>
          <td class="column" colspan="3">
            <el-form-item prop="money">
              <el-input placeholder="请输入金额" v-model="cuForm.money">
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column firstTd">
            <span class="tip">*</span>附注
          </td>
          <td class="column" colspan="3">
            <el-form-item prop="remark">
              <el-input
                type="textarea"
                placeholder="请输入附注"
                v-model="cuForm.remark"
                :rows="4"
              >
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column firstTd">
            <span class="tip">*</span>申请人
          </td>
          <td class="column">
            {{ userName }}
          </td>
          <td class="column">
            <span class="tip">*</span>受款人
          </td>
          <td class="column">
            <el-form-item prop="payee">
              <el-input placeholder="请输入受款人" v-model="cuForm.payee">
              </el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
      <div style="width:60%;margin: 5px auto">
        <el-upload
          :action="upFileUrl"
          :headers="uploadHeaders"
          :on-preview="handlePreview"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="cuForm.fileList"
        >
          <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
      </div>
    </el-form>
    <FlowBtnRow :form-name="'cuForm'" :is-new-data="is_created" :can-check="cuForm.can_check"
                :is-applyer="cuForm.flow_applyer_id == userId" :flow-status="cuForm.flow_status"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete"
    ></FlowBtnRow>
  </div>
</template>

<script>
import FlowBtnRow from '@/components/FlowBtnRow'
import { upFileUrl } from '@/api/others'
import { getToken } from '@/utils/auth'

export default {
  name: 'temporary_bill_info',
  components: { FlowBtnRow },
  data() {
    return {
      cuForm: {
        id: null,
        date: null,
        reason: null,
        money: null,
        payee: null,
        remark: null,
        fileList: []
      },
      upFileUrl,
      uploadHeaders: {},
      is_created: false,
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请输入事由', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        payee: [
          { required: true, message: '请输入受款人', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入附注', trigger: 'blur' }
        ]
      },
      formLoading: false
    }
  },
  computed: {
    userName() {
      return this.cuForm.real_name ? this.cuForm.real_name : this.$store.state.user.name
    },
    userId() {
      return this.$store.state.user.id
    }
  },
  created() {
    if (getToken()) {
      this.uploadHeaders['Authorization'] = getToken()
    }
  },
  methods: {
    save() {

    },
    submit() {
    },
    pass(option) {

    },
    returnBack(option) {

    },
    remove() {

    },
    actualDelete() {

    },
    getDetail(id) {

    },
    closeThisPage() {
      this.$store.dispatch('tagsView/closeCurPage')
    },
    handlePreview(file) {
      window.open(file.response.data)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 60%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.tip {
  color: red;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-textarea {
  padding: 5px;
}

/deep/ .el-input {
  padding: 0 5px;
}
</style>
